<template>
  <div>
    <div>
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="tu" @click="fun()">
      <img :src="shopdata.img1" alt="" />
      <div class="box1">
        <h1>￥{{ shopdata.originprice }}</h1>
      </div>
      <div class="miaoshu">
        <div class="miaoshu1">
          <span>7折</span>
          <span>满300减40</span>
          <span>满赠</span>
        </div>
        <p>{{ shopdata.proname }}</p>
      </div>
    </div>
    <!-- <listall></listall> -->
    <!-- <div class="boxs">
      <div class="box2">
        <p>促销</p>
        <span>7.2折</span>
        <p>此商品专享7.2折</p>
        <img
          src="https://m.cdfgsanya.com/wap/resources/images/icons/icon-product-info-dotted@2x.3c55c29b.jpg"
          alt=""
        />
      </div>
      <div>
        <span>满赠</span>
        <span>赠完为止</span>
        <p>领券</p>
      </div>
    </div> -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="add(str)"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
  
  <script>
//   import listall from "../components/homepage/mycontent.vue";

import service from "../../../utils/service";
export default {
  components: {},
  data() {
    return {
      shopdata: {},
      str: "",
    };
  },
  mounted() {
    this.str = this.$route.params.yf;
    service({
      url: `http://118.178.238.19:3001/api/pro/detail/${this.str}`,
      method: "get",
    }).then((res) => {
      this.shopdata = res.data.data;
      console.log(res.data.data);
    });
    this.$forceUpdate();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    add(str) {
      //添加购物车
      console.log("商品id", str);
      service({
        url: "http://118.178.238.19:3001/api/cart/add",
        method: "post",
        data: {
          num: 1,
          proid: str,
          userid: sessionStorage.getItem("userid"),
        },
      }).then((res) => {
        console.log(res);
        if (res.data.data == 0 || res.data.data == 1) {
          alert("商品添加成功");
        }
      });
    },
  },
};
</script>
  
  <style scoped>
/* * {
  background: #efeff5;
} */

.van-nav-bar {
  width: 100%;
  background: white;
}
.tu h1 {
  color: black;
  background: #a9977a;
  display: block;
  width: 90%;
  margin-top: 5px;
}
.tu img {
  height: 305px;
  width: 100%;
  text-align: center;
}
.box1 {
  background: #a9977a;
  height: 62px;
  width: 352px;
  margin: 10px 10px;
  border-radius: 10px;
}
.miaoshu {
  position: fixed;
  top: 402px;
  height: 92px;
  width: 352px;
  margin: 10px 10px;
  border-radius: 10px;
  border-radius: 10px;
  background: white;
}
.miaoshu .miaoshu1 {
  background: white;
  border-radius: 10px;
}
.miaoshu p {
  margin-left: 10px;
  background: white;
}
.miaoshu span {
  background: #eeeae4;
  margin: 10px 10px;
  height: 22px;
  font-size: 14px;
}
.boxs {
  height: 92px;
  width: 352px;
  margin: 10px 10px;
  border-radius: 10px;
  background: white;
  position: fixed;
  top: 400px;
}
.boxs.box2 span {
  background: #ffebeb;
}
</style>